<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2019-11-11 20:10:12
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/db.js"></script>
	<style type="text/css">
		.main-animate {
			height: 484px;
			overflow: hidden;
			transition: all .4s;
		}

		.toggle-1 {
			text-align: center;
			padding: 10px 0;
		}

		.toggle-1 img {
			width: 20px;
			transition: all .4s;
		}

		.toggle-1 img.rotate {
			transform: rotate(180deg);
		}

		.p-select {
			padding: 0 30px 15px;
		}

		.p-select span,
		.p-select i {
			vertical-align: middle;
		}

		.item {
			border-bottom: 1px dashed #cd1b21;
		}

		.item:last-child {
			border-bottom: 0;
		}

		.item>.van-cell__title {
			max-width: inherit;
		}

		.item .tag {
			display: inline-block;
			width: 20px;
			height: 20px;
			vertical-align: middle;
			background: #cd1b21;
			color: #fff;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			border-radius: 2px;
			position: relative;
			left: -18px;
		}

		.title {
			height: 36px;
			position: relative;
			padding-bottom: 10px;
			border-bottom: 1px dashed #ebedf0;
		}

		.title .title-text {
			float: left;
		}

		.title .title-text span {
			vertical-align: middle;
		}

		.title .title-num {
			float: right;
		}

		.title .title-num .arrow-toggle {
			display: inline-block;
			margin-left: 12px;
			width: 24px;
			text-align: center;
		}

		.title .title-num .arrow-toggle img {
			width: 16px;
			vertical-align: middle;
		}

		.title .title-num .arrow-toggle img.rotate {
			width: 16px;
			vertical-align: middle;
			transform: rotate(180deg);
		}

		.delete {
			width: 16px;
			height: 16px;
		}

		.delete img {
			width: 16px;
			vertical-align: text-top;
		}

		.txt {
			display: inline-block;
			max-width: 120px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.detail {
			overflow: hidden;
			transition: all .4s;
		}

		.detail .van-cell {
			padding: 10px 0;
		}

		.detail .van-cell:not(:last-child)::after {
			left: 0;
		}

		.hide {
			height: 0;
		}

		.shadow {
			box-shadow: 0 0 5px rgb(200, 198, 198);
			position: relative;
			background: #fff;
		}

		.font-danger .van-stepper__input {
			color: #cd1b21;
		}

		.sq {
			display: inline-block;
			width: 4px;
			height: 14px;
			background: #cd1b21;
			vertical-align: text-bottom;
			left: -15px;
			position: relative;
			box-shadow: 1px 0px 3px 0 #cd1b21;
		}

		.mode-title {
			padding: 10px 15px;
			font-size: 14px;
			font-weight: 700;
			background: #cd1b21;
			color: #fff;
		}

		.mode-type {
			line-height: 46px;
			padding: 0 15px;
			font-weight: 700;
			background: #fff;
		}

		.mode-type:active {
			background: #e6e6e6;
		}

		.bill-Exp {
			color: #cd1b21;
			font-weight: 700;
		}

		.money {
			font-size: 16px;
			color: #cd1b21
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full" @click="clickDom($event)">
			<van-nav-bar class="head" title="调货单" left-arrow @click-left="onClickLeft">

				<div slot="right" class="head-right">
					<span @click.stop="showMenu = !showMenu">
						<img src="../image/menu.png" />
					</span>
				</div>

			</van-nav-bar>
			<div class="body-with-bottom">
				<div class="content content-padding">

					<div style="padding: 0 10px 15px;">
						<div class="shadow">
							<div class="content-label">基本信息</div>
							<div>
								<van-cell :value="formData.N_ClientName">
									<div slot="title">
										<span class="sq"></span>
										<span style="margin-left:-8px;">供应商</span>
									</div>
								</van-cell>
								<van-cell title="客户" :value="formData.ClientName" is-link @click="openScreen(-1,10)">
								</van-cell>
								<van-field label="备注" v-model="formData.Explain"></van-field>
							</div>
						</div>
					</div>

					<div class="p-select">

						<van-row gutter="30">
							<van-col span="6"></van-col>
							<van-col span="12">
								<van-button type="primary" block size="small" @click="openScreen(-1,65)"
									v-if="type != 3">
									<van-icon name="add-o"></van-icon>
									<span>选择商品</span>
								</van-button>
								<van-button type="primary" block size="small" @click="openMore" v-if="type == 3">
									<van-icon name="more-o"></van-icon>
									<span>关联查询</span>
								</van-button>
							</van-col>
							<van-col span="6"></van-col>
						</van-row>
					</div>
					<div style="padding: 0 10px 15px;">
						<div class="shadow">
							<div class="content-label">调货明细</div>
							<div class="no-data" v-show="!formDetailData.length">暂无数据</div>
							<div>
								<van-cell class="item" :border="false" v-for="(row,index) in formDetailData">
									<div slot="title" class="title">
										<div class="title-text">
											<span class="tag">{{formDetailData.length - index}}</span>
											<span class="delete" @click="deleteRow(row,index)" v-if="type != 3">
												<img src="../image/delete.png" />
											</span>
											<span class="txt">{{row.name}}</span>
										</div>
										<div class="title-num">
											<span v-if="type == 3">{{row.num}}</span>
											<span v-else>
												<van-stepper button-size="24" integer min="1" v-model="row.num">
												</van-stepper>
											</span>
										</div>
									</div>
									<div slot="label" class="detail">
										<div>
											<van-field label="进价" type="number" v-model="row.price">
											</van-field>
											<van-field label="售价" type="number" v-model="row.sellPrice">
											</van-field>
											<van-field label="备注" v-model="row.Explain">
											</van-field>
										</div>
									</div>
								</van-cell>

							</div>
						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
			<div class="bottom">
				<div class="bottom-left-label_" v-if="type != 3">
					<!-- <div style="line-height: 50px;display: inline-block;">
						<span></span>合计:
						<span class="number">{{getTotalCount()}}</span>
					</div> -->

					<div style="line-height: 22px;display: inline-block;padding:3px 0;">
						<span>进：</span>
						<span class="number">￥{{getTotalPrice(1)}}</span>
						</br>
						<span>售：</span>
						<span class="number">￥{{getTotalPrice(2)}}</span>
					</div>

				</div>
				<div class="bottom-left-label_ bottom-left-label_full" v-if="type == 3">
					<span>合计:</span>
					<span class="number">{{getTotalCount()}}</span>
					<span>进价：</span>
					<span class="number">￥{{getTotalPrice(1)}}</span>
					<span>售价：</span>
					<span class="number">￥{{getTotalPrice(2)}}</span>
				</div>
				<div class="bottom-right-button_" v-if="type != 3">
					<div class="rad">
						<van-button class="b-color-1" style="border-radius:15px 0 0 15px;" :disabled="ifConfirm"
							:loading="ifConfirm" loading-text="数据提交中..." type="primary"
							@click="isPaySubmit = false;submitForm()">{{type == 3?'已过账':'提交'}}
						</van-button>
						<van-button class="b-color-2" style="border-radius:0 15px 15px 0;" :disabled="ifConfirm"
							type="primary" @click="payForm">支付
						</van-button>

					</div>
				</div>
			</div>
		</div>

		<div class="head-menu" v-if="showMenu">
			<img class="menu-arrow" src="../image/menu-arrow.png" />

			<div @click="openHistory" v-show="type == 0">
				<img src="../image/history.png" />
				<span>历史单据</span>
			</div>
			<div @click="openDraft">
				<img src="../image/draft-list.png" />
				<span>历史草稿</span>
			</div>
			<div @click="saveLocal" v-show="type == 0">
				<img src="../image/draft.png" />
				<span>保存草稿</span>
			</div>
		</div>

		<van-popup v-model="showMoreBill" round position="bottom">
			<div style="padding-bottom: 10px;">
				<van-cell v-for="row in billArray" is-link @click="openBill(row)">
					<div><span class="bill-Exp">【{{row.BillName}}】</span>{{row.BillNO}}</div>
					<div style="color: #969799;padding-left:10px;">
						<van-row>
							<van-col span="8">金额:<span>￥{{row.DMoney}}</span></van-col>
							<van-col span="16">{{row.Explain}}</van-col>
						</van-row>

					</div>
				</van-cell>
			</div>
		</van-popup>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			vm.onClickLeft();
		});

		api.addEventListener({
			name: 'selectArray'
		}, function (ret, err) {
			var selectType = ret.value.selectType;
			var type = ret.value.type;
			var array = ret.value.array;
			if (selectType == 65) {
				var newArray = [];
				for (var i in array) {
					var row = array[i];
					newArray.push({
						showDetail: false,
						hasEdit: false,
						id: row.id,
						name: row.name,
						num: 1,
						price: '',
						sellPrice: '',
						Explain: ''
					})
				}
				vm.formDetailData = newArray.concat(vm.formDetailData);
			}
		})

		api.addEventListener({
			name: 'selectRow'
		}, function (ret, err) {
			var selectType = ret.value.selectType;
			var type = ret.value.type;
			var row = ret.value.row;
			if (selectType == 10) {
				vm.formData.ClientName = row.name;
				vm.formData.ClientID = row.id;

			}

		});

		var historyData = api.pageParam.historyData;
		var draftID = api.pageParam.draftID;
		var userInfo = FLD.getUserInfo();
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showMain: false,
				ifConfirm: false,
				showMenu: false,
				type: 0,
				formID: 0,
				isPaySubmit: false,
				showMoreBill: false,
				formData: {
					N_ClientID: userInfo.S_GYSID,
					N_ClientName: userInfo.S_GYSName,
					ClientID: 0,
					ClientName: '',
					Explain: ''
				},
				billArray: [],
				formDetailData: [],
				deleteFormDetailData: []
			},
			created: function () {
				var that = this;
				if (historyData) {
					that.type = historyData.B_Type;
					that.formID = historyData.BillID;
					that.formData = {
						N_ClientID: historyData.N_ClientID || 0,
						N_ClientName: historyData.N_ClientName || '',
						ClientID: historyData.ClientID || 0,
						ClientName: historyData.ClientName || '',
						Explain: historyData.Explain || '',
					}
					that.getDetailData();

				}
				if (draftID) {
					var sql = "select * from Draft where DraftID='" + draftID + "'";
					DB.selectSql(sql, function (data) {
						that.formData = JSON.parse(data[0].JSONStr1);
						that.formDetailData = JSON.parse(data[0].JSONStr2);
					})
				}

			},
			methods: {
				clickDom(e) {
					if (!$(e.target).closest('.head-menu').length) {
						this.showMenu = false;
					}
				},
				getDetailData() {
					var that = this;
					var obj = {
						S_BillType: 92,
						S_B_Type: that.type,
						S_BillID: that.formID
					}
					that.showLoading = true;
					FLD.ajax('AP_HisListDe_A', obj, function (res) {
						that.showLoading = false;
						if (res.ds[0].status && res.ds[0].status == 500) {
							layer.open({
								content: res.ds[0].msg,
								skin: 'msg',
								time: 2
							});
						} else {
							for (var i in res.ds) {
								var row = res.ds[i];
								that.formDetailData.push({
									showDetail: false,
									hasEdit: false,
									id: row.ProductID,
									name: row.ProductName,
									num: row.BNum,
									price: row.JPrice,
									sellPrice: row.DPrice,
									Explain: row.Explain
								})
							}
							that.billArray = res.ds1;
						}
					})
				},
				openMore() {
					this.showMoreBill = true;
				},
				openBill(row) {
					var that = this;
					if (row.N_BillType == 101 || row.N_BillType == 1101) {
						var obj = {
							S_BillType: row.N_BillType,
							S_BillID: row.N_BillID
						}
						FLD.ajax('AP_HisList_XX', obj, function (res) {
							this.showMoreBill = false;
							var row = res.ds[0];
							if (row.B_Type == 3) {
								api.openWin({
									name: 'sellingPrint',
									url: 'sellingPrint.html',
									reload: true,
									slidBackEnabled: false,
									pageParam: {
										historyData: row
									}
								})
							} else {
								api.openWin({
									name: 'selling',
									url: 'selling.html',
									reload: true,
									slidBackEnabled: false,
									pageParam: {
										historyData: row
									}
								})
							}


						})
					} else {
						var obj = {
							S_BillType: row.N_BillType,
							S_BillID: row.N_BillID
						}
						FLD.ajax('APP_BillLinkN', obj, function (res) {
							if (res.ds.length) {
								api.openWin({
									name: 'formConfig',
									url: 'common/formConfig.html',
									reload: true,
									slidBackEnabled: false,
									pageParam: {
										keyName: res.ds[0].B_KeyCol,
										keyValue: row.N_BillID,
										objName: res.ds[0].APPListName,
										titleName: res.ds[0].BillName
										// isPosted: row.Status >= 80 ? true : false
									}
								})
							}
						})

						// layer.open({
						// 	content: '暂未开放!',
						// 	skin: 'msg',
						// 	time: 2
						// });
					}
				},
				openScreen(type, index) {
					var obj = {
						S_Type: index,
						S_Cont: '',
						S_BranchID: userInfo.S_BranchID,
						S_SXZ: '',
						S_StockID: userInfo.S_StockID,
						S_CargoID: userInfo.S_CargoID,
						S_BarCode: '',
						S_PriceN: userInfo.S_PriceN,
						S_ProductID: 0
					}

					if (index == 65) {
						api.openWin({
							name: '筛选' + index,
							url: 'common/baseMultipleScreen.html',
							reload: true,
							slidBackEnabled: false,
							pageParam: {
								filterData: obj,
								type: type
							}
						})
					} else {
						api.openWin({
							name: '筛选' + index,
							url: 'common/baseScreen.html',
							reload: true,
							slidBackEnabled: false,
							pageParam: {
								filterData: obj,
								type: type
							}
						})
					}

				},

				deleteRow(row, index) {
					this.$dialog.confirm({
						title: '提示',
						message: '是否删除该商品?'
					}).then(() => {
						if (row.detailID != 0) {
							this.deleteFormDetailData.push(row);
						}
						this.formDetailData.splice(index, 1);


					}).catch(() => {

					});

				},
				submitForm() {
					var that = this;
					if (!that.formData.ClientID) {
						layer.open({
							content: '请选择客户',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					if (that.formDetailData.length == 0) {
						layer.open({
							content: '请选择调货商品',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					var x = 0;
					for (var i in that.formDetailData) {
						if (!that.formDetailData[i].price || !that.formDetailData[i].sellPrice) {
							x = 1;
						}
					}
					if (x == 1) {
						layer.open({
							content: '存在调货商品金额格式不正确!',
							skin: 'msg',
							time: 2
						});
						return false;
					}

					that.$dialog.confirm({
						title: '提示',
						closeOnClickOverlay: true,
						message: '是否确认提交?'
					}).then(() => {
						that.submitSQL();
					}).catch(() => {

					});



				},
				submitSQL() {
					var that = this;
					if (that.type == 0) {
						var S_SPHZ = [];
						for (var i in that.formDetailData) {
							var detailArray = [];
							detailArray.push(
								'\'' + that.formDetailData[i].id + '\'',
								'\'' + that.formDetailData[i].num + '\'',
								'\'' + that.formDetailData[i].price + '\'',
								'\'' + that.formDetailData[i].sellPrice + '\'',
								'\'' + that.formDetailData[i].Explain + '\''
							)
							S_SPHZ.push(detailArray.join(','))
						}

						var obj = {
							S_ClientID: that.formData.ClientID,
							S_GYSID: that.formData.N_ClientID,
							S_SPHZ: S_SPHZ.join('|')
						}
						that.ifConfirm = true;
						FLD.ajax('AP_DHDTJB', obj, function (res) {
							that.ifConfirm = false;
							if (res.ds[0].status == 200) {

								//本地数据库删除草稿
								if (draftID) {
									var sql = "delete from Draft where DraftID='" + draftID + "'";
									DB.executeSql(sql, function () {
										api.sendEvent({
											name: 'refreshDraft'
										});
									})
								}

								if (that.isPaySubmit) {
									that.isPaySubmit = false;
									var payMoney = that.getTotalPrice(2);
									layer.open({
										content: '保存成功,即将跳转支付!',
										skin: 'msg',
										time: 2,
										end: function () {
											api.openWin({
												name: 'pay',
												url: 'common/pay.html',
												reload: true,
												slidBackEnabled: false,
												pageParam: {
													payData: {
														S_BillType: 101,
														S_BillID: res.ds[0].BillID,
														S_UserType: 1,
														S_DMoney: payMoney,
														S_BranchID: userInfo.S_BranchID,
														S_ClientID: userInfo.S_ClientID,
														S_PayType: '0'
													},
													payType: 1
												}
											})
										}
									});
								} else {
									layer.open({
										content: '保存成功',
										skin: 'msg',
										time: 2
									});
								}

								that.formData = {
									N_ClientID: userInfo.S_GYSID,
									N_ClientName: userInfo.S_GYSName,
									ClientID: 0,
									ClientName: '',
									Explain: ''
								}
								that.formDetailData = [];

							} else {
								layer.open({
									content: res.ds[0].msg,
									skin: 'msg',
									time: 2
								});
							}
						})
					}
				},
				payForm() {
					var that = this;
					that.isPaySubmit = true;
					that.submitForm();
				},
				openDraft() {
					api.openWin({
						name: 'draft',
						url: 'draft.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							tabActive: 2
						}
					})
				},
				saveLocal() {
					var that = this;
					that.showMenu = false;
					var jsonstr1 = JSON.stringify(that.formData).replace(/\'/g, '\'\'')
					var jsonstr2 = JSON.stringify(that.formDetailData).replace(/\'/g, '\'\'')
					if (draftID) {
						var sql = "update Draft set JSONStr1='" + jsonstr1 + "',JSONStr2='" + jsonstr2 + "',UpdateTime='" + FLD.getFormatDate() + "' where DraftID='" + draftID + "'";
						DB.executeSql(sql, function () {
							layer.open({
								content: '保存成功',
								skin: 'msg',
								time: 2
							});
							api.sendEvent({
								name: 'refreshDraft'
							});
						})
					} else {
						var sql = "insert into Draft (JSONStr1,JSONStr2,CreateTime,UpdateTime,Type,Status) values ('" + jsonstr1 + "','" + jsonstr2 + "','" + FLD.getFormatDate() + "',null,92,null)"
						DB.executeSql(sql, function () {
							layer.open({
								content: '保存成功',
								skin: 'msg',
								time: 2
							});
						})
					}

				},

				getTotalCount() {
					var totalCount = 0;
					for (var i in this.formDetailData) {
						totalCount += this.formDetailData[i].num
					}
					return totalCount;
				},
				getTotalPrice(index) {
					var totalPrice = 0;
					for (var i in this.formDetailData) {
						if (index == 1) {
							if (this.formDetailData[i].price) {
								totalPrice += this.formDetailData[i].num * this.formDetailData[i].price;
							}
						} else {
							if (this.formDetailData[i].sellPrice) {
								totalPrice += this.formDetailData[i].num * this.formDetailData[i].sellPrice;
							}
						}


					}
					return totalPrice.toFixed(2);
				},

				openHistory() {
					api.openWin({
						name: '历史单据',
						url: 'common/historicalDocuments.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							type: 92,
							tabActive: 2
						}
					})
				},
				onClickLeft() {
					if (this.type == 3) {
						api.closeWin();
					} else {
						this.$dialog.confirm({
							title: '提示',
							message: '是否退出调货单界面?'
						}).then(() => {
							api.closeWin();
						}).catch(() => {

						});
					}

				}
			}
		})
	};
</script>

</html>